<template>
	<view class="warp">
		<WolfHeader :sort-data="sortData"></WolfHeader>
		<uni-list>
			<!-- <uni-list-item :thumb="userInfo.avatar_file?.url || '../../static/logo.png' " thumbSize="sm"
				:right-text="'目前排名 '+ mySort" :title="userInfo.nickname || '匿名'"
				:note="(sign_times|| 0) + '天'"></uni-list-item> -->
			<!-- <uni-list-item v-for="(item,index) in dataList" :key="item._id"
				:thumb="item.avatar_file?.url || '../../static/logo.png' " thumbSize="sm" :right-text="item.sort"
				:title="item.nickname || '匿名'" :note="(item.sign_times|| 0) + '天'"></uni-list-item> -->
			<uni-list-item>
				<template v-slot:body>
					<view class="list">
						<view class="list-sort">{{mySort}}</view>
						<image :src="userInfo.avatar_file?.url || '../../static/logo.png'" mode="aspectFill" class="list-image"></image>
						<view class="list-body">
							<view class="list-body-userInfo">
								<view class="list-body-userInfo-name">{{userInfo.nickname || '匿名'}}</view>
								<view class="list-body-userInfo-days">{{sign_times|| 0}} 天</view>
								<view class="list-body-userInfo-days">{{sign_score|| 0}} 学习分</view>
							</view>
							<view class="list-body-date">
								<view class="list-body-date-start-day">
									<text>开始：</text>
									<uni-dateformat :date="start_sign_date" />
								</view>
								<view class="list-body-date-current-day">
									<text>最后：</text>
									<uni-dateformat :date="sign_date" />
								</view>
							</view>
							<view class="list-body-level">{{getSignLevel(sign_times)}}</view>
						</view>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item v-for="(item,index) in dataList" :key="item._id"  @click="navigator(item._id)" clickable>
				<template v-slot:body>
					<view class="list">
						<view class="list-sort">{{item.sort}}</view>
						<image :src="item.avatar_file?.url || '../../static/logo.png'" mode="aspectFill" class="list-image"></image>
						<view class="list-body">
							<view class="list-body-userInfo">
								<view class="list-body-userInfo-name">{{item.nickname || '匿名'}}</view>
								<view class="list-body-userInfo-days">{{item.sign_times|| 0}} 天</view>
								<view class="list-body-userInfo-days">{{item.sign_score|| 0}} 学习分</view>
							</view>
							<view class="list-body-date">
								<view class="list-body-date-start-day">
									<text>开始：</text>
									<uni-dateformat :date="item.start_sign_date" />
								</view>
								<view class="list-body-date-current-day">
									<text>最后：</text>
									<uni-dateformat :date="item.sign_date" />
								</view>
							</view>
							<view class="list-body-level">{{item.level}}</view>
						</view>
					</view>
				</template>
			</uni-list-item>
			<!-- <uni-list-item title="" note=""></uni-list-item> -->
		</uni-list>

		<view style="height: 50px;"></view>
		<view class="bottom">
			<button type="primary" size="mini" @click="gobook">去读书</button>
		</view>
		
		<view class="fixed" @click="navigator_books">
			学习中心
		</view>
	</view>
</template>

<script>
	import WolfHeader from "./components/header.vue"
	import {
		mapState,
		mapActions
	} from 'pinia'
	import {
		useUserStore
	} from "@/pinia/user.js"
	const db = uniCloud.database();

	export default {
		name: "wolf-sort",
		components: {
			WolfHeader
		},
		data() {
			return {
				dataList: [],
				sortData: {

				},
				sign_date: 0,
				sign_times: 0,
				mySort: 0, //自己排名
				start_sign_date: 0 ,//开始打卡日期
				sign_score:0
			}
		},
		computed: {
			...mapState(useUserStore, ['userInfo', 'sysSetting']),
		},
		onShow() {
			this.loadMyTimes()
			this.loadData()
		},
		methods: {
			async loadMyTimes() {
				let res = await db.collection('uni-id-users')
					.doc(this.userInfo._id)
					.field('sign_times,sign_date,start_sign_date,sign_score')
					.get()
				console.log("res=========>>>>",res.result.data);
				const {
					sign_times = 0, sign_date = 0, start_sign_date = 0 ,sign_score = 0
				} = res.result.data[0]
				this.sign_date = sign_date
				this.sign_times = sign_times
				this.start_sign_date = start_sign_date
				this.sign_score = sign_score
				console.log("===>", sign_times, sign_date, start_sign_date);
			},
			/**
			 * 获取打卡等级
			 */
			getSignLevel(days) {
				// console.log("Level==>",this.sysSetting.sign_level,days);
				let data = this.sysSetting.sign_level || []
				let len = data.length
				days = days || 0
				if(len == 0) return
				for(let i=0;i<len;i++){
					// console.log(data[i]);
					if(days < data[0].day){
						return '暂无'
					}
					let day1 = data[i]?.day
					let day2 = data[i+1]?.day || 0
					if(!day2){
						return data[i].level
					}
					if(days >= day1 && days < day2){
						return data[i].level
					}
				}
			},
			async loadData() {
				uni.showLoading({
					
				})
				let res = await db.collection('uni-id-users')
					.where("sign_times != '' && sign_times != null")
					.field('nickname,avatar_file,sign_times,start_sign_date,sign_date,sign_score')
					.orderBy("sign_times desc")
					.limit(100)
					.get()
				let data = res.result.data || []
				let len = Math.min(data.length, 3)
				let arr = ["first", "second", "third"]
				for (let i = 0; i < data.length; i++) {
					let sort = i + 1
					data[i].sort = sort + ''
					data[i].level = this.getSignLevel(data[i].sign_times)
					if (i < len) {
						this.sortData[arr[i]] = data[i]
					}
					if (data[i]._id == this.userInfo._id) {
						this.mySort = sort + ''
					}
				}
				data.splice(0, len)
				if (!this.mySort) { //没有查到当前排名
					this.getMySort()
				}
				this.dataList = [...data]
				uni.hideLoading()
				console.log("&&&&&&&&&&&==========", this.sortData, data);
			},
			async getMySort() {
				let res = await db.collection('uni-id-users').where(`sign_times>=${this.sign_times}`).count()
				console.log("getMySort====>", res);
				this.mySort = res.result.total
			},
			gobook(){
				let obj = {
					sign_date: this.sign_date,
					sign_times: this.sign_times,
					start_sign_date: this.start_sign_date //开始打卡日期
				}
				// return console.log("obj",obj);
				uni.navigateTo({
					url:`/pages/book/booking?sign_obj=${JSON.stringify(obj)}`,
				})
			},
			navigator(id){
				console.log("id==>",id);
				if(!id) return
				uni.navigateTo({
					url:`/pages/list/userInfo?id=${id}`
				})
			},
			navigator_books(){
				uni.navigateTo({
					url:"/pages/book/list"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 50px;
	}
	//list-body-level
	.list{
		flex: 1;
		flex-direction: row;
		align-items: center;
		&-sort{
			justify-content: center;
			align-items: center;
			// padding: 10rpx;
			margin-right: 10rpx;
			border-radius: 50rpx;
			background-color: #ea6cf5;
			width: 80rpx;
		}
		&-image{
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}
		&-body{
			flex: 1;
			flex-direction: row;
			font-size: 12px;
			justify-content: space-around;
			&-userInfo{
				flex: 1;
				padding: 0 10rpx;
				&-name{}
				&-days{}
				
			}
			&-date{
				padding: 0 10rpx;
				&-start-day,&-current-day{
					flex-direction: row;
				}
			}
			&-level{
				padding: 0 10rpx;
				align-items: center;
				justify-content: center;
				background-color: #bfe6ff;
				border-radius: 5rpx;
			}
		}
	}
	.fixed {
		position: fixed;
		right: 0rpx;
		top: 50%;
		// width: 30rpx;
		background-color: #ea6cf5;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 10rpx;
		writing-mode: vertical-rl;
		/* 从右到左 */
		text-orientation: upright;
		/* 保持正常显示 */
	}
</style>